<template>
  <div class="selection-box">
    <el-cascader
      size="large"
      class="selection-centerbox"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
      :disabled="!showArea"
    ></el-cascader>
    <el-select v-model="routeLine" placeholder="请选择" v-if="showLine">
      <el-option
        v-for="item in routeLines"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-button v-if="showLine" class="warning-btn" @click="search"
      >查询</el-button
    >
  </div>
</template>
<script>
import { regionData, CodeToText } from "element-china-area-data";
import { getRouteGroup } from "@/api";
export default {
  name: "NewSelection",
  props: {
    roleOption: {
      type: Object,
      default: () => {
        return null;
      },
    },
    showLine: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  },
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      routeLines: [],
      routeLine: "",
      areaInfo: "",
      showArea: true,
    };
  },
  created() {
    this.selectedOptions = [
      this.roleOption.provinceId + "",
      this.roleOption.cityId + "",
      this.roleOption.countryId + ""
    ];
    console.log(this.selectedOptions)
    if (this.showLine) {
      this.geRoutetLines(this.roleOption.countryId);
    }
    this.filterRegionData();
  },
  methods: {
    search() {
      this.$emit("handleSearch", this.selectedOptions, this.routeLine);
    },
    handleChange() {
      console.log(this.selectedOptions);
      this.selectedOptions.forEach((item) => {
        this.areaInfo += CodeToText[item];
      });
      this.$emit("change", this.selectedOptions, this.routeLine);
    },
    filterRegionData() {
      switch (this.roleOption.identityType) {
        case 1: // 省局
          this.options = this.options.filter((item) => {
            return item.label == this.roleOption.province;
          });
          break;
        case 2: // 市局
          let parentOptions = null;
          this.options.forEach((item) => {
            if (item.value == this.roleOption.provinceId) {
              parentOptions = JSON.parse(JSON.stringify(item));
            }
          });
          let targetOptions = parentOptions.children.filter((item) => {
            return item.value == this.roleOption.cityId;
          });
          parentOptions.children = targetOptions;
          this.options = [JSON.parse(JSON.stringify(parentOptions))];
          break;
        case 3:
        case 4:
        default:
          this.showArea = false;
          break;
      }
    },
    geRoutetLines(id) {
      getRouteGroup({
        countryId: id,
      })
        .then((res) => {
          if (res.statusCode == 200) {
            if (res.data && res.data.length > 0) {
              this.routeLines = res.data.map((item) => {
                return {
                  value: item.id,
                  label: item.routeName,
                };
              });
              this.routeLine = this.routeLines[0].value; //默认赋值线路
            }
          }
          this.$emit("getList", this.selectedOptions, this.routeLine);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.selection-box {
  display: flex;
  align-items: center;
  & > span {
    margin-right: 20px;
    color: #fff;
  }
  .selection-centerbox {
    margin: 0 20px;
  }
  .warning-btn {
    height: 40px;
    background: #fa6400;
    border-radius: 5px;
    padding: 0 35px;
    color: #fff;
    margin-left: 20px;
  }
}
/deep/.el-button {
  border: none;
}
</style>
